<template>
  <el-card
    class="asset-info-card"
    shadow="never"
    :style="{ height: px(height) }"
  >
    <!-- 层级路径（整行） -->
    <div class="kv kv--full">
      <div class="label">设备名称</div>
      <el-tooltip :content="pathText" placement="top" :disabled="!pathText">
        <div class="value one-line">{{ fmt(row.name) }}</div>
      </el-tooltip>
    </div>

    <!-- 二列描述网格 -->
    <div class="grid" :style="{ '--cols': columns }">
      <div class="kv">
        <div class="label">设备规格</div>
        <div class="value">
          <span size="small" effect="plain" class="spanColor">{{ fmt(row.specification) }}</span>
        </div>
      </div> 
      <div class="kv">
        <div class="label">设备材质</div>
        <div class="value">
          <span size="small" effect="plain" class="spanColor">{{ fmt(row.material) }}</span>
        </div>
      </div> 
      <div class="kv">
        <div class="label">设备类别</div>
        <div class="value">
          <span size="small" effect="plain">{{ fmt(row.beType) }}</span>
        </div>
      </div>
      <div class="kv">
        <div class="label">设备区域</div>
        <div class="value">
          <span size="small" effect="plain">{{ fmt(row.area) }}</span>
        </div>
      </div>
      <div class="kv">
        <div class="label">设备模块</div>
        <div class="value">
          <span size="small" effect="plain">{{ fmt(row.mokuai) }}</span>
        </div>
      </div> 
      <div class="kv">
        <div class="label">设备数量</div>
        <div class="value">
          <span size="small" effect="plain">{{ fmt(row.quantity) + fmt(row.unit) }}</span>
        </div>
      </div>
      <div class="kv">
        <div class="label">设备金额</div>
        <div class="value">
          <span size="small" effect="plain"> {{ fmtUnit(row.amount, "万") }}</span>
        </div>
      </div>
      <div class="kv">
        <div class="label">设计温度</div>
        <div class="value">
          <span size="small" effect="plain" class="spanColor"> {{ fmtUnit(row.designTemp, "℃") }}</span>
        </div>
      </div>
      <div class="kv">
        <div class="label">设计压力</div>
        <div class="value">
          <span size="small" effect="plain" class="spanColor">{{ fmtUnit(row.designPress, "MPa") }}</span>
        </div>
      </div>
      <div class="kv">
        <div class="label">电机功率</div>
        <div class="value">
          <span size="small" effect="plain" class="spanColor">{{ fmtUnit(row.motorPower, "kW") }}</span>
        </div>
      </div>

      <div class="kv">
        <div class="label">搅拌方式</div>
        <div class="value">
          <span size="small" effect="plain">{{ fmt(row.mixingType) }}</span>
        </div>
      </div>
      <div class="kv">
        <div class="label">设备品牌</div>
        <div class="value">
          <span size="small" effect="plain">{{ fmt(row.brand) }}</span>
        </div>
      </div>
      <div class="kv">
        <div class="label">设备型号</div>
        <div class="value">
          <span size="small" effect="plain">{{ fmt(row.model) }}</span>
        </div>
      </div>
      <div class="kv">
        <div class="label">制造厂家</div>
        <div class="value">
          <span size="small" effect="plain">{{ fmt(row.manufacturer) }}</span>
        </div>
      </div> 

      <!-- 备注：独占一行 -->
      <!-- <div class="kv kv--full">
          <div class="label">备注</div>
          <div class="value one-line">{{ row?.remark || '—' }}</div>
        </div> -->
    </div>
    <!-- 备件信息（整行展示，三列对齐） -->
    <!-- <div class="kv kv--full" style="margin-top: 20px; margin-bottom: 20px">
      <div class="label">备件信息</div>
      <div class="value">
        <template v-if="hasSpares">
          <div
            class="sp-table"
            :class="{
              'with-name': showNameCol,
              'with-code': showCodeCol,
            }"
            v-if="hasSpares"
          >
            <div class="sp-head">
              <template v-if="showNameCol"><span>名称</span></template>
              <template v-if="showCodeCol"><span>编码</span></template>
              <span>当前库存</span>
              <span>总库存</span>
              <span>使用数量</span>
            </div>

            <div class="sp-body">
              <div class="sp-row" v-for="(sp, i) in spares" :key="sp.id ?? i">
                <template v-if="showNameCol">
                  <span class="name one-line" :title="sp?.name || ''">{{
                    sp?.name ?? "—"
                  }}</span>
                </template>
                <template v-if="showCodeCol">
                  <span class="code one-line" :title="sp?.code || ''">{{
                    sp?.code ?? "—"
                  }}</span>
                </template>
                <span class="num">{{ fmtNum(sp?.stockAvailable) }}</span>
                <span class="num">{{ fmtNum(sp?.stockTotal) }}</span>
                <span class="num">{{ used(sp) }}</span>
              </div>
            </div>

              <div class="sp-foot" v-if="spares.length">  
    <template v-if="showNameCol"><span class="foot-empty"></span></template>
    <template v-if="showCodeCol"><span class="foot-empty"></span></template>

    <span class="num">{{ spareTotals.available }}</span>
    <span class="num">{{ spareTotals.total }}</span>
    <span class="num">{{ spareTotals.used }}</span>
  </div>  
          </div>
        </template>
        <span v-else>-</span>
      </div>
    </div> -->
  </el-card>
</template>

<script setup>
import { computed } from "vue";

// <script setup> 里加两个开关；你当前场景是都不显示：
const showNameCol = true; // true=显示“名称”
const showCodeCol = true; // true=显示“编码”

const px = (v) => (typeof v === "number" ? `${v}px` : v);
const props = defineProps({
  row: { type: Object, default: () => ({}) },
  /** 直接传好的路径文本（优先级更高） */
  path: { type: String, default: "" },
  /** 由父级提供的路径函数：getPath(row) -> string */
  getPath: { type: Function, default: null },
  columns: { type: Number, default: 2 },
  height: { type: [Number, String], default: "72vh" },
});

console.log(props.row);

// 为空判断：null / undefined / "" / "   "
const isBlank = (v) =>
  v === null || v === undefined || (typeof v === "string" && v.trim() === "");

// 直接显示：为空则返回 "-"
const fmt = (v, dash = "-") => (isBlank(v) ? dash : v);

// 带单位显示：有值才拼单位，否则返回 "-"
const fmtUnit = (v, unit, dash = "-") => (isBlank(v) ? dash : `${v}${unit}`);

// 数字显示：为空返回 '—'（0 也会正常显示）
const fmtNum = (v) => (isBlank(v) ? "—" : String(v));

// 已用 = 总 - 可用（不小于 0）
const used = (sp) => {
  const t = Number(sp?.stockTotal ?? 0);
  const a = Number(sp?.stockAvailable ?? 0);
  return Math.max(0, t - a);
};


const pathText = computed(() => {
  if (props.path) return props.path;
  if (typeof props.getPath === "function")
    return props.getPath(props.row) || "";
  return "";
});

const spares = computed(() =>
  Array.isArray(props.row?.spareInfos) ? props.row.spareInfos : []
);
const hasSpares = computed(() => spares.value.length > 0);

 



// 合计（可选）
const spareTotals = computed(() => {
  let total = 0,
    available = 0;
  for (const s of spares.value || []) {
    total += Number(s?.stockTotal ?? 0);
    available += Number(s?.stockAvailable ?? 0);
  }
  return { total, available, used: Math.max(0, total - available) };
});
</script>

<style scoped>
.asset-info-card {
  border-radius: 10px;
  padding: 12px 14px;
}

/* 两列描述 */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr); /* 用变量控制列数 */
  gap: 10px 24px;
  margin-top: 8px;
}

/* 单项：左标签右值 */
.kv {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  column-gap: 12px;
  min-height: 28px;
}
.kv--full {
  grid-column: 1 / span var(--cols, 2); /* 占满两列 */
}
.label {
  color: #909399; /* Element Plus 次要文字色 */
  font-size: 13px;
  text-align: left;
}
.value {
  color: var(--el-text-color-primary);
  font-size: 14px;
}

.spanColor {
  color: green;
  font-size: 14px;
}
.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 让 Tag 更贴近“类型”展示 */
:deep(.span) {
  padding: 0 6px;
  border-radius: 6px;
}

.asset-info-card :deep(.el-card__body) {
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable; /* 避免出现滚动条时布局抖动 */
}

/* 统一表头与行的网格定义 */
/* ===== 备件信息：5 列统一网格（名称 / 编码 / 当前 / 总 / 已用） ===== */
/* 公共变量 */
/* ===== 备件信息：统一 5/4/3 列网格（名称 / 编码 / 当前 / 总 / 已用） ===== */

/* 公共变量 */
.sp-table {
  --name-col: minmax(180px, 2fr);
  --code-col: minmax(160px, 1.5fr);
  --num-col: 110px;

  /* 让 Head / Body / Foot 处于同一个滚动容器 */
  display: grid;
  grid-template-rows: auto 1fr auto; /* 头 / 内容 / 脚 */
  max-height: 220px;
  overflow: auto; /* ← 滚动放在这里 */
  scrollbar-gutter: stable; /* 保留空间，避免抖动 */
  background: #fff;
  box-sizing: border-box;
}

/* 头 / 行 / 脚：通用外观（不设置列数，列数下面按状态类切换） */
.sp-head,
.sp-row,
.sp-foot {
  display: grid;
  column-gap: 16px;
  align-items: center;
  box-sizing: border-box;
}
.sp-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  font-size: 12px;
  color: #909399;
  font-weight: 600;
  padding: 6px 0;
  border-bottom: 1px solid #eef1f5;
}
.sp-body {
  display: grid;
  row-gap: 8px;
  padding: 6px 0;
} /* ← 不再 overflow */
.sp-row {
  padding: 4px 0;
  border-bottom: 1px dashed #f0f2f5;
}
.sp-row:hover {
  background: #fafcff;
}
.sp-head > *,
.sp-row > *,
.sp-foot > * {
  text-align: left;
}
.sp-row .name,
.sp-row .code {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.num {
  font-variant-numeric: tabular-nums;
}
.sp-foot {
  position: sticky;
  bottom: 0;
  z-index: 1; /* 合计吸底（可选） */
  background: #fff;
  padding: 8px 0;
  border-top: 1px solid #f0f2f5;
  font-weight: 600;
}

/* —— 列定义（根据有无 name/code 切换；三处同时切换，确保对齐） —— */
/* 5 列：名称 + 编码 + 3 数字 */
.sp-table.with-name.with-code .sp-head,
.sp-table.with-name.with-code .sp-row,
.sp-table.with-name.with-code .sp-foot {
  grid-template-columns: var(--name-col) var(--code-col) var(--num-col) var(
      --num-col
    ) var(--num-col);
}
/* 4 列：名称 + 3 数字 */
.sp-table.with-name:not(.with-code) .sp-head,
.sp-table.with-name:not(.with-code) .sp-row,
.sp-table.with-name:not(.with-code) .sp-foot {
  grid-template-columns: var(--name-col) var(--num-col) var(--num-col) var(
      --num-col
    );
}
/* 4 列：编码 + 3 数字 */
.sp-table.with-code:not(.with-name) .sp-head,
.sp-table.with-code:not(.with-name) .sp-row,
.sp-table.with-code:not(.with-name) .sp-foot {
  grid-template-columns: var(--code-col) var(--num-col) var(--num-col) var(
      --num-col
    );
}
/* 3 列：仅 3 个数字 */
.sp-table:not(.with-name):not(.with-code) .sp-head,
.sp-table:not(.with-name):not(.with-code) .sp-row,
.sp-table:not(.with-name):not(.with-code) .sp-foot {
  grid-template-columns: var(--num-col) var(--num-col) var(--num-col);
}

/* 窄屏稍收紧数字列 */
@media (max-width: 560px) {
  .sp-table {
    --num-col: 96px;
  }
}
</style>
